<template>
	<div>
		<div>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form layout="inline">
						<div style="margin-top: 10px">
							<a-form-item label="参数名称">
								<a-input placeholder="请输入" />
							</a-form-item>

							<a-form-item label="参数键名">
								<a-input placeholder="请输入" />
							</a-form-item>

							<a-form-item label="内置系统">
								<a-select
									prop="status"
									show-search
									placeholder="字典状态"
									option-filter-prop="children"
									style="width: 200px"
									:filter-option="filterOption"
									@focus="handleFocus"
									@blur="handleBlur"
									@change="handleChange"
								>
									<a-select-option value="正常"> 正常 </a-select-option>
									<a-select-option value="停用"> 停用 </a-select-option>
								</a-select>
							</a-form-item>

							<a-form-item label="创建时间">
								<a-range-picker @change="rangePicker" prop="createTime" />
							</a-form-item>
							<span>
								<a-button style="margin-top: 4px" @click="handleSearch" type="primary">搜索</a-button>
								<a-button @click="handleReset" style="margin-left: 8px">重置</a-button>
							</span>
						</div>
					</a-form>
				</a-col>
				<!-- 按钮 -->
				<a-col :span="24">
					<div style="margin: 10px 0px; padding-left: 10px">
						<a-button type="primary" @click="showModal" width="400" ghost>新增</a-button>
						<a-modal v-model="visible" width="600px" title="添加参数" @ok="handleOk">
							<CreateForm></CreateForm>
						</a-modal>
						<a-button type="primary" ghost style="margin-left: 10px">修改</a-button>
						<a-button type="danger" @click="batchDelete" ghost style="margin-left: 10px">删除</a-button>
						<a-button type="primary" ghost style="margin-left: 10px">导入</a-button>
						<a-button type="primary" ghost style="margin-left: 10px">导出</a-button>
					</div>
				</a-col>
				<a-col :span="24">
					<a-table :columns="columns" :data-source="data" :row-selection="rowSelection">
						<a-col :gutter="8" :span="24">
							<a-form-item label="创建时间">
								<!--  @change="onChange" -->
								<a-range-picker @change="rangePicker" />
							</a-form-item>
						</a-col>

						<a slot="name" slot-scope="text">{{ text }}</a>
						<span slot="customTitle"><a-icon type="smile-o" /> Name</span>
						<span slot="configType" slot-scope="configType">
							<a-tag
								v-for="configType in configType"
								:key="configType"
								:color="configType === 'loser' ? 'volcano' : configType.length > 5 ? 'blue' : 'blue'"
							>
								{{ configType.toUpperCase() }}
							</a-tag>
						</span>
						<span slot="action" slot-scope="text, record">
							<a>修改</a>
							<a-divider type="vertical" />
							<a @click="handleDelete(record)">删除</a>
							<a-divider type="vertical" />
						</span>
					</a-table>
				</a-col>
			</a-row>
		</div>
	</div>
</template>

<script>
import CreateForm from './components/CreateForm.vue';

const columns = [
	{
		title: '参数主键',
		align: 'center',
		dataIndex: 'configId',
		scopedSlots: { customRender: 'configId' },
	},
	{
		title: '参数名称',
		align: 'center',
		dataIndex: 'configName',
	},
	{
		title: '参数键名',
		align: 'center',
		dataIndex: 'configKey',
	},
	{
		title: '参数键值',
		align: 'center',
		dataIndex: 'configValue',
	},
	{
		title: '内置系统',
		align: 'center',
		dataIndex: 'configType',
		scopedSlots: { customRender: 'configType' },
	},
	{
		title: '备注',

		dataIndex: 'remark',
		ellipsis: true,
		align: 'center',
	},
	{
		title: '创建时间',
		dataIndex: 'createTime',
		scopedSlots: { customRender: 'createTime' },
		align: 'center',
	},
	{
		title: '操作',
		width: '150',
		align: 'center',
		dataIndex: 'action',
		scopedSlots: { customRender: 'action' },
	},
];
const data = [
	{
		key: '1',
		configId: '1',
		configName: 'admin',
		configKey: 'sys_user-sex',
		configValue: 'admin',
		configType: '是',
		remark: 'dcscds',
		status: ['正常'],
		createTime: '2022-03-02 12:23:23',
		action: '',
	},
	{
		key: '2',
		configId: '1',
		configName: 'admin',
		configKey: 'sys_user-sex',
		configValue: 'admin',
		configType: '是',
		remark: 'dcscds',
		status: ['正常'],
		createTime: '2022-03-02 12:23:23',
		action: '',
	},
	{
		key: '3',
		configId: '1',
		configName: 'admin',
		configKey: 'sys_user-sex',
		configValue: 'admin',
		configType: '',
		remark: 'dcscds',
		status: ['正常'],
		createTime: '2022-03-02 12:23:23',
		action: '',
	},
];
const rowSelection = {
	onChange: (selectedRowKeys, selectedRows) => {
		console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
	},
	onSelect: (record, selected, selectedRows) => {
		console.log(record, selected, selectedRows);
	},
	onSelectAll: (selected, selectedRows, changeRows) => {
		console.log(selected, selectedRows, changeRows);
	},
};
export default {
	data() {
		return {
			components: {
				CreateForm,
			},
			visible: false,
			expandedKeys: ['0-0-0', '0-0-1'],
			data,
			columns,
			rowSelection,
			expandedRowKeys: [],
			// 筛选日期
			dateRange: [],
		};
	},
	computed: {},
	methods: {
		// 状态选择
		handleChange(value) {
			console.log(`selected ${value}`);
		},
		handleBlur() {
			console.log('blur');
		},
		handleFocus() {
			console.log('focus');
		},
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		// 搜索按钮
		async handleSearch() {
			console.log('sousuo');
		},
		// 重置
		handleReset() {
			console.log('reset');
			this.dateRange = [];
			// 	this.queryParams = {
			// 		pageNum: 1,
			// 		pageSize: 10,
			// 		roleName: undefined,
			// 		roleKey: undefined,
			// 		status: undefined,
			// 	};
			// 	this.handleReset();
		},
		// 新增按钮显示
		showModal() {
			this.visible = true;
		},
		// 新增编辑
		handleOk(e) {
			console.log(e);
			this.visible = false;
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			console.log('shanchuyilie');
			const configId = row.configId;
			const that = this;
			this.$confirm({
				title: '警告',
				content: `真的要删除 参数主键为${configId}的数据项吗?`,
				okText: '删除',
				okType: 'danger',
				cancelText: '取消',
				// onOk() {
				// 	delConfig(configId).then((response) => {
				// 		if (response.code === 200) {
				// 			that.$message.success('删除成功!');
				// 			that.getList();
				// 		} else {
				// 			that.$message.error(response.msg);
				// 		}
				// 	});
				// },
			});
		},
		// 批量删除
		batchDelete(ids) {
			console.log('shanchu');
			const that = this;
			this.$confirm({
				title: '系统提示',
				content: `是否确认删除编号用户为  ${ids.length} 位用户吗?`,
				okText: '删除',
				okType: 'danger',
				cancelText: '取消',
				onOk() {},
			});
		},
		onContextMenuClick(treeKey, menuKey) {
			console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
		},
		// 搜索框中的日期选择
		rangePicker(date, dateString) {
			this.dateRange = dateString;
		},
		/* 任务状态修改 */
		confirmHandleStatus() {
			console.log(23343);
			// 		row.status = row.status === '0' ? '1' : '0';
			// 		const text = row.status === '0' ? '启用' : '停用';
			// 		changeUserStatus(row.userId, row.status);
			// 			.then(() => {
			// 				this.$message.success(text + '成功', 3);
			// 			})
			// 			.catch(function () {
			// 				this.$message.error(text + '发生异常', 3);
			// 			});
		},
		cancelHandleStatus() {
			console.log('sudishfcd');
		},
	},
	components: { CreateForm },
};
</script>
